<template>
    <el-dialog
        :visible.sync="dialogVisible"
        title="批量修改围栏"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        width="1000px"
    >

        <div id="batchContainer" style="height:600px;"/>

        <div style="text-align: center; margin-top:15px;">
            <el-popconfirm :title="'确定修改吗？'" @onConfirm="submitForm()">
                <el-button slot="reference" type="primary">确定</el-button>
            </el-popconfirm>
        </div>

    </el-dialog>
</template>

<script>
import {CarParkFenceApi} from '@/api/intercity/CarParkFenceApi'
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
    name: 'FenceBatchUpdate',
    components: {},
    data() {
        return {
            formData: [],
            dialogVisible: false,
            map: null,
            polygonList: [],
            polygonEditor: null
        }
    },
    methods: {
        // 显示组件
        showBatchUpdate(data) {
            let that = this
            that.dialogVisible = true
            that.formData = data
            if(that.map){
                that.loadMap()
            }else{
                that.createMap(function(){
                    that.loadMap()
                })
            }
        },
        createMap(callback){
            let that = this
            window._AMapSecurityConfig = {
                securityJsCode: process.env.VUE_APP_GAODE_SECRET_KEY,
            };
            AMapLoader.load({
                'key': process.env.VUE_APP_GAODE_KEY, // 申请好的Web端开发者Key，首次调用 load 时必填
                'version': '2.0', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                'plugins': ['AMap.MouseTool', 'AMap.PolygonEditor'] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            }).then((AMap) => {
                that.map = new AMap.Map('batchContainer', {
                    zoom: 11, // 级别
                })
                callback()
            }).catch(e => {
            })
        },
        loadMap() {
            const that = this

            that.map.clearMap()
            that.polygonList=[]
            if(that.polygonEditor){
                that.polygonEditor.close()
                that.polygonEditor = null
            }

            //添加围栏
            for (let i = 0; i < that.formData.length; i++) {
                that.polygonList[i] = new AMap.Polygon({
                    path: JSON.parse(that.formData[i].points),
                    strokeColor: '#FF33FF',
                    strokeWeight: 1,
                    strokeOpacity: 0.2,
                    fillOpacity: 0.4,
                    fillColor: '#1791fc',
                    zIndex: that.formData[i].sort,
                    bubble: true
                })
            }

            that.map.add(that.polygonList)
            that.map.setFitView();

            //添加编辑围栏组件
            that.polygonEditor = new AMap.PolygonEditor(that.map)
            that.polygonEditor.addAdsorbPolygons(that.polygonList)
            for (let i = 0; i < that.polygonList.length; i++) {
                that.polygonList[i].on('click', () => {
                    that.polygonEditor.setTarget(that.polygonList[i])
                    that.polygonEditor.open()
                })
            }
        },

        // 提交表单
        submitForm() {
            const that = this
            const postData = []

            for (let i = 0; i < that.formData.length; i++) {
                const data = {
                    'id': that.formData[i].id,
                    'points': JSON.stringify(that.polygonList[i].getPath())
                }

                postData.push(data)
            }

            CarParkFenceApi.batchUpdate(postData).then((response) => {
                that.dialogVisible = false
                that.$emit('refresh')
            })
        }
    }
}
</script>
